<template>
	<view class="buy-qr-code-page u-flex u-flex-col">
		<u-navbar title="时效二维码" :border-bottom="false" :background="background" title-color="#161616"
			back-icon-color="#161616"></u-navbar>

		<view class="u-flex-1 w-100">
			<view class="u-padding-20">
				<image class="w--100 u-border-radius-20"
					src="https://resource.lanbaozixun.com/uploads/images/20241231162506afd3f5852.jpg" mode="widthFix">
				</image>
			</view>
			<view class="bg-white u-border-radius-20 u-margin-20 u-padding-30 u-flex u-row-between">
				<view class="u-flex">
					<image src="https://resource.lanbaozixun.com/uploads/images/202412311630282c5eb9714.png"
						mode="widthFix" class="icon"></image>
					<view class="u-padding-left-20 u-text-left">
						<view class="xxl u-font-weight-500 u-flex items-start">
							申请体验
							<view class="lable xxs u-margin-left-15">免费</view>
						</view>
						<view class="nr u-color-7F7F7F u-padding-top-5">点击可申请免费体验</view>
					</view>
				</view>
				<view class="btn u-font-weight-500" @click="applyExperience">
					去体验
				</view>
			</view>
			<view
				class="bg-white u-border-radius-20 u-margin-left-20 u-margin-right-20 u-padding-30 u-flex u-row-between">
				<view class="u-flex">
					<image src="https://resource.lanbaozixun.com/uploads/images/202412311630282c5eb9714.png"
						mode="widthFix" class="icon"></image>
					<view class="u-padding-left-20 u-text-left">
						<view class="xxl u-font-weight-500 u-flex items-start">
							单次解锁
						</view>
						<view class="nr u-color-7F7F7F u-padding-top-5">{{buyInformation.buy_price}}元解锁单次推广资格</view>
					</view>
				</view>
				<view class="btn u-font-weight-500" @click="purchase">
					去解锁
				</view>
			</view>
		</view>

		<view class="footer-area">
			<view class="footer-buy-btn u-margin-left-20 u-margin-right-20 u-flex">
				<view class="price-information u-padding-25 u-flex-1">
					{{buyInformation.month_price}}元包月不限推广
				</view>

				<view class="buy-btn u-padding-right-35" @click="monthPurchase">
					立即开通
				</view>
			</view>
			<view class="footer-buy-btn u-margin-left-20 u-margin-right-20 u-flex u-margin-top-30">
				<view class="price-information u-padding-25 u-flex-1">
					{{buyInformation.year_price}}元包年不限推广
				</view>

				<view class="buy-btn u-padding-right-35" @click="yearPurchase">
					立即开通
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		prepay
	} from '@/api/app'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		orderBuy,
	} from '@/api/order'
	import {
		qrCodeApplyeExperience
	} from '@/api/user'
	export default {
		props:{
			buyInformation:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				background: {
					// 导航栏背景图
					background: 'url(https://resource.lanbaozixun.com/uploads/images/2024123116162103db55506.png) no-repeat',
					backgroundSize: '100% auto'
				}
			}
		},
		methods: {
			initiatePayment(i) {
				uni.showLoading({
					title: '加载中'
				});
				orderBuy({
					action: 'submit',
					item_id: i
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						uni.hideLoading();
						prepay({
							from: res.data.type,
							order_id: res.data.order_id,
							pay_way: 1,
						}).then(res => {
							this.handleWechatPay(res.data);
						}).catch(err => {}).finally(() => {
							setTimeout(() => {
								this.loadingPay = false
							}, 500)
						})
					} else {
						throw new Error(res.msg)
					}
				})
			},
			async applyExperience(){
				let d = await qrCodeApplyeExperience();
				
				this.$u.toast(d.msg);
			},
			monthPurchase() {
				this.initiatePayment(this.buyInformation.month_item_id)
			},
			yearPurchase() {
				this.initiatePayment(this.buyInformation.year_item_id)
			},
			purchase() {
				this.initiatePayment(this.buyInformation.buy_item_id)
			},
			// 微信支付
			handleWechatPay(data) {
				wxpay(data).then(res => {
					this.handPayResult(res)
				})
			},
			// 支付后处理
			handPayResult(result) {
				switch (result) {
					case 'success':
						window.location.href = ''
						break;
					case 'fail':
					default:
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F0F0F0 !important;
	}

	.buy-qr-code-page {
		min-height: 100vh;
		background: url('https://resource.lanbaozixun.com/uploads/images/2024123116162103db55506.png') no-repeat;
		background-size: 100% auto;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
	}

	.lable {
		padding: 2px 6px;
		background: #FBDDBB;
		display: inline-block;
		border-radius: 10px 10px 10px 0;
	}

	.btn {
		padding: 5px 15px;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #F9E2B6 0%, #FEBD7D 100%);
	}

	.footer-area {
		position: sticky;
		bottom: calc(constant(safe-area-inset-bottom) + 60rpx);
		/* 兼容 iOS < 11.2 */
		bottom: calc(env(safe-area-inset-bottom) + 60rpx);
		/* 兼容 iOS >= 11.2 */

		.footer-buy-btn {
			width: 94vw;
			background: url('https://resource.lanbaozixun.com/uploads/images/2024123116450568d3f8775.png') no-repeat;
			background-size: 100% 100%;

			.price-information {
				font-size: 34rpx;
				font-weight: 600;
				color: #FBDDBB;
				background: url('https://resource.lanbaozixun.com/uploads/images/20241231163028e1a969123.png') no-repeat;
				background-size: 100% 100%;
			}

			.buy-btn {
				color: #33313E;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
	}
</style>